const mounted = (el, bindings: any) => {
    if (!el.getAttribute) {
        return;
    }
    const defaultWidth = el?.getAttribute('width') || 250;
    el.onmousedown = function (e) {
        const init = e.clientX;
        const parent = el.parentNode;
        const initWidth = parent.offsetWidth;
        const maxWidth = el?.getAttribute('maxWidth') || ~~window.innerWidth * 0.4;
        document.onmousemove = function (e) {
            const end = e.clientX;
            const newWidth = end - init + initWidth;
            if (newWidth <= defaultWidth) {
                parent.style.width = `${defaultWidth}px`;
            } else if (newWidth >= maxWidth) {
                parent.style.width = maxWidth;
            } else {
                parent.style.width = newWidth + 'px';
            }
            bindings.value(parent.style.width);
        };
        // 偶尔触发
        document.onmouseup = function (e) {
            document.onmousemove = null;
            document.onmouseup = null;
            el.releaseCapture && el.releaseCapture();
        };
        return false;
    };
};

const vMove = {
    mounted
};
export const setupMoveDirective = (app: any) => {
    app.directive('move', vMove);
};
